<template>
  <div>
    <div class="comment-post">
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
      />
      <van-button class="postbtn" @click="postcomment">发布</van-button>
    </div>
  </div>
</template>
<script>
import { commentPostApi } from "@/api/comment";
export default {
  props: {
    artId: {
      type: [Number, String],
    },
  },
  data() {
    return {
      message: "",
    };
  },
  methods: {
    async postcomment() {
      //阻止用户发布空评论
      if (this.message.trim() == 0) {
        this.$toast("请填写内容！！");
        return;
      }
      try {
        let obj = {
          target: this.artId,
          content: this.message,
          art_id: this.$store.state.articleId,
        };
        let { data } = await commentPostApi(obj);
        //发布成功之后 清空输入口的值
        this.message = "";
        //发布成功之后 让父组件关闭对话框
        this.$emit("closepopup");
        //发布成功之后把数据 给 父组件添加渲染 因为不刷新 不会从服务器返回数据的
        this.$emit("newpl", data.data.new_obj);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.comment-post {
  display: flex;
  align-items: center;
  padding: 32px 0 32px 32px;
  .postcomment {
    background-color: #f5f7f9;
  }
  .postbtn {
    width: 150px;
    border: none;
    padding: 0;
    color: #6ba3d8;
    &::before {
      display: none;
    }
  }
}
</style>
